<template>
    <div class="main-container">
        <el-card class="card !border-none" shadow="never">
            <div class="flex justify-between items-center">
                <span class="text-page-title">{{ pageName }}</span>
            </div>
            <el-card class="card my-[10px] !border-none table-search-wrap" shadow="never">
                <el-form :inline="true" :model="orderTable.searchParam" ref="searchFormRef">
                    <el-form-item label="创建时间" prop="create_time">
                        <el-date-picker v-model="orderTable.searchParam.create_time" type="datetimerange"
                            value-format="YYYY-MM-DD HH:mm:ss" start-placeholder="起始时间"
                            end-placeholder="结束时间" />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="loadOrderList()">搜索</el-button>
                        <el-button @click="resetForm(searchFormRef)">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-card>
            <el-table :data="orderTable.data" :loading="orderTable.loading" size="large" class="table-top">
                <el-table-column label="商品" width="300" prop="order_goods.goods_name">
                    <template #default="{ row }">
                        <div>订单编号：{{ row.order_no }}</div>
                        <div class="flex cursor-pointer">
                            <div class="flex items-center min-w-[50px] mr-[10px]">
                                <img class="w-[50px] h-[50px]" v-if="row.order_goods?.goods_image" :src="img(row.order_goods?.goods_image)">
                                <img class="w-[50px] h-[50px]" v-else src="" alt="">
                            </div>
                            <div class="flex flex-col w-[308px]">
                                <p class="multi-hidden text-[14px]">{{ row.order_goods?.goods_name }}</p>
                                <span class="text-[12px] text-[#999]">{{ row.sku_name?.sku_name }}</span>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="单价（元）/数量" min-width="140">
                    <template #default="{ row }">
                        <div class="flex flex-col">
                            <span class="text-[13px]">￥{{ row.order_goods?.price || 0 }}</span>
                            <span class="text-[13px] mt-[5px]">{{ row.order_goods?.num || 0 }}件</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="团队计算价" min-width="120" prop="calc_commission" />
                <el-table-column label="买家" min-width="120">
                    <template #default="{ row }">
                        <div class="flex flex-col" v-if="row.order_goods?.member_id">
                            <span class="text-[12px] text-primary cursor-pointer" @click="memberEvent(row.order_goods.member_id)">{{ row.order_goods?.member_name }}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="等级" min-width="70" prop="level_name" />
                <el-table-column label="团队商" min-width="120">
                    <template #default="{ row }">
                        <template v-if="row.team_member_name">
                            <span :title="row.team_member_name" class="multi-hidden text-primary cursor-pointer" @click="toFenxiaoDetail(row)">{{ row.team_member_name }}</span>
                        </template>
                        <span v-else>--</span>
                    </template>
                </el-table-column>
                <el-table-column label="计算方式" min-width="150">
                    <template #default="{ row }">
                        <span>{{ row.type_name }}: {{ row.calc_rate + '%'}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="可用积分" min-width="120" prop="amount" />
                <el-table-column label="备注" min-width="120" prop="remark" />
                <el-table-column label="操作" fixed="right" align="right" min-width="120">
                    <template #default="{ row }">
                        <el-button type="primary" link @click="detailEvent(row)">查看订单</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="mt-[16px] flex justify-end">
                <el-pagination v-model:current-page="orderTable.page" v-model:page-size="orderTable.limit"
                    layout="total, sizes, prev, pager, next, jumper" :total="orderTable.total"
                    @size-change="loadOrderList()" @current-change="loadOrderList" />
            </div>
        </el-card>
    </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { getTeamOrderList } from '@/app/api/range'
import { img, setTablePageStorage, getTablePageStorage } from '@/utils/common'
import { FormInstance } from 'element-plus'
import { useRouter, useRoute } from 'vue-router'

const route = useRoute()
const router = useRouter()
const pageName = route.meta.title

interface OrderTable {
    page: number
    limit: number
    total: number
    loading: boolean
    data: any[]
    searchParam: any
}
const orderTable = reactive<OrderTable>({
    page: 1,
    limit: 10,
    total: 0,
    loading: true,
    data: [],
    searchParam: {
        create_time: [],
    }
})

const searchFormRef = ref<FormInstance>()

/**
 * 获取订单列表
 */
const loadOrderList = (page: number = 1) => {
    orderTable.loading = true
    orderTable.page = page
    getTeamOrderList({
        page: orderTable.page,
        limit: orderTable.limit,
        ...orderTable.searchParam
    }).then((res: any) => {
        orderTable.loading = false
        orderTable.data = res.data.data
        orderTable.total = res.data.total
        setTablePageStorage(orderTable.page, orderTable.limit, orderTable.searchParam);

    }).catch(() => {
        orderTable.loading = false
    })
}
loadOrderList(getTablePageStorage(orderTable.searchParam).page)

// 查看团队商详情
const toFenxiaoDetail = (row: any) => {
    const routeUrl = router.resolve({
        path: '/shop_fenxiao/detail',
        query: { id: row.member_id }
    })
    window.open(routeUrl.href, '_blank')
}

// 订单详情
const detailEvent = (data: any) => {
    const routeData = router.resolve('/shop/order/detail?order_id=' + data.order_goods.order_id)
    window.open(routeData.href, '_blank')
}
const memberEvent = (id: number) => {
    const routeUrl = router.resolve({
        path: '/member/detail',
        query: { id }
    })
    window.open(routeUrl.href, '_blank')
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
    loadOrderList()
}
</script>

<style lang="scss" scoped>
    /* 多行超出隐藏 */
    .multi-hidden {
        word-break: break-all;
        text-overflow: ellipsis;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
</style>
